'use strict'
import React, { Component, PropTypes } from 'react'



class Specs extends Component {


    constructor(props, context){
        super(props, context)
        this.state  = {
            num :1,
            addEnable:false,
            subEnable:false
        }

        this.sub = this.sub.bind(this);
        this.add = this.add.bind(this);


        const _this = this;

        let data = props.data;

        data.specs.map(function(item,i){

            let key = 'group'+i;
            _this.state[key] = 0

        })


    }

    add(quantity){

        let {num,addEnable,subEnable} = this.state;

        num += 1

        if(num >= quantity){
            num = quantity;
            addEnable = true;
        }

        if(num > 1){
            subEnable = false;
        }

        this.setState({
            num : num,
            addEnable:addEnable,
            subEnable:subEnable
        })
    }

    sub(quantity){

        let {num,addEnable,subEnable} = this.state;

        num -= 1

        if(num < quantity){
            addEnable = false;
        }

        if(num <= 1){
            num= 1
            subEnable = true;
        }

        this.setState({
            num : num,
            addEnable:addEnable,
            subEnable:subEnable
        })

    }


    selected(groupId,current,data){


        let _this = this;

		let title = data.title;


		this.state['group'+groupId] = current;

        data.specs.map(function(item,i){

            let group =  _this.state['group'+i];



            console.log("group="+group);

            if(i==0){
                title += ' ';
            }

            title += data.specs[i].features[group].name;
        })



        let  item = {};
        item['group'+groupId] = current;
        item['title'] = title;

        this.setState(
            item
        )

        this.props.postData.title = title;

	}

	test(){

    	alert("dddd");
	}


	render(){

		let {showSpace,showState,addCart,data,postData} = this.props;



        let showStyle = showState==0?'hide':'';
        let showBuy = showState==0?'':'buyshow-enter';

        let subStyle = this.state.subEnable?'input-sub off':'input-sub';
        let addStyle = this.state.addEnable?'input-add off':'input-add';

        const _this = this;


		return(

			<div className={"specMenu pop "+showStyle} >
				<div className={'content '+showBuy}>
					<div className="close" onClick={showSpace} ><span className="pop-icon-close"></span></div>
					<div className="proInfo flex-row bb">
						<div className="productImg"><img src="//i8.mifile.cn/v1/a1/405cbc19-1c3b-56d3-789f-46bb0674c143.webp"/></div>
						<div className="proDesc flex-column">
							<div className="price">249</div>
							<div className="desc">{postData.title}</div>
						</div>
					</div>
					<div className="maxH5">
						<div className="specGroups">

							{
                                data.specs.map(function(item,i){

                                	return(
										<div>
											<div className="specTitle">{item.name}</div>
											<div className="specs flex-row bb">

												{
													item.features.map(function(sub,j){

														let icon,current;

                                                        let group = _this.state['group'+i];

														if(j == group){
                                                            current = 'on';
														}



														if(sub.previewType =='IMAGE'){
                                                            icon = <img src={sub.preview}/>
														}

														return(

															<div className={'specItem flex-row '+current} onClick={() => { _this.selected(i,j,data) }}>
																<p>{sub.name}</p>
															</div>

                                                        )

													})
                                                }

											</div>
										</div>

                                    )

								})
							}

						</div>

						<div className="specBuy flex-row bb">
							<div className="specTitle">购买数量</div>
							<div className="addNum">
								<div className="sub" onClick={() => { this.sub(20) }}>
									<div className={subStyle}></div>
								</div>
								<div className="num input-num">{this.state.num}</div>
								<div className="add" onClick={() => { this.add(20) }}>
									<div className={addStyle}></div>
								</div>
							</div>
						</div>

					</div>
				</div>

				<div className="btn flex-row">
					<div className="submitNow" onClick={addCart}>确定</div>
				</div>

			</div>




    )
	}
}
export default Specs